<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">  
    <head>  
        <title>Hello World!</title>  
       <!--  <meta name="_csrf" th:content="${_csrf.token}"/>
        <meta name="_csrf_header" th:content="${_csrf.headerName}"/> -->
        <!-- 不能用3.2.1的jquery版本，否则 fileupload这个方法找不到-->
        <script src="static/js/jquery-1.8.2.min.js"></script>
        <script src="static/js/jquery.ui.widget.js"></script>
        <script src="static/js/jquery.iframe-transport.js"></script>
        <script src="static/js/jquery.fileupload.js"></script>
        <style type="text/css">  
	        .bar {  
	            margin-top:10px;  
	            height:10px;  
	            max-width: 300px;  
	            background: green;  
	        }  
        </style> 
        <script type="text/javascript">
        $(document).ready(function() {
            /* var token = $("meta[name='_csrf']").attr("content");
            var header = $("meta[name='_csrf_header']").attr("content");
            $(document).ajaxSend(function(e, xhr, options) {
                xhr.setRequestHeader(header, token);
            }); */
            $('#upfile').fileupload({
                    dataType: 'json',
                    add: function (e, data) {
                        data.context = $('<button/>').text('Upload')
                                .appendTo(document.body)
                                .click(function () {
                                    data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                                    data.submit();
                                });
                    },
                    done: function (e, data) {
                        data.context.text('Upload finished.');
                    }
           });
        });    
        </script>
    </head>  
    <body>  
        <!-- <h1 th:inline="text">Hello [[${#httpServletRequest.remoteUser}]]!</h1> -->
        <p>测试crsf表单提交</p>
        <form action="/api/testPost" method="post" enctype="application/x-www-form-urlencoded">
        	<input type="text" name="key1"/><br/>
        	<input type="text" name="key2"/><br/>
        	<!--<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/> -->
        	<input type="submit" value="submit"/><br/>
        </form>
        <p>测试文件上传</p>
<!--         <input type="file" id="upfile" name="upfile" data-url="/file/upload"/><br/> -->
	    <form action="/file/upload" method="POST" enctype="multipart/form-data">
        	<input type="file" id="upfile" name="upfile" data-url="/file/upload"/><br/>
        	<input type="text" id="dexc" name="mapinfo" value="this is mapinfo"/><br/> 
        	<!-- common-fileupload对reque的封装有问题，提交类型为multipart/form-data时获取不到parameter -->
        	<!--<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>  -->
        	<button type="submit" value="upload" text="upload"/>upload<br/>
        </form>
        <div class="progress">  
        <div class="bar" style="width: 0%;"></div>  
        <div class="upstatus" style="margin-top:10px;"></div>  
    </div> 
    </body>  
</html>  